<template>
  <div style="background-color: #fff; min-height: calc(100vh)">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="state.nickname"
          name="昵称"
          placeholder="请填写昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { saveProfile } from '@/api/mine/personal'
import { Notify, Toast } from 'vant'
export default {
  data() {
    return {
      value: '',
      state: {}
    }
  },

  computed: {},

  mounted() {
    this.value = ''
  },

  methods: {
    onSubmit() {
      saveProfile(this.state).then(res => {
        Notify({ type: 'success', message: '昵称修改成功' })
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell-group--inset {
  margin: 0px !important;
}
::v-deep .van-cell {
  padding: 17px 15px;
  .van-cell__title,
  .van-cell__valu {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .van-cell__title {
    width: 50px;
  }
  .van-field__error-message {
    display: none;
  }
}
.van-button {
  display: block;
  width: 95%;
  height: 45px;
  margin: 25px auto 0;
  background: #009697;
  border: none;
  border-radius: 5px;
  font-size: 17px;
  font-weight: 400;
  color: #ffffff;
}
</style>
